<template>
  <div>
    <div style="margin-bottom: 16px">
      <a-button
        type="primary"
        :disabled="!hasSelected"
        :loading="loading"
        @click="start"
      >
        批量盖章
      </a-button>
      <span style="margin-left: 8px">
        <template v-if="hasSelected">
          {{ `Selected ${selectedRowKeys.length} items` }}
        </template>
      </span>
    </div>
    <a-table
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange
      }"
      :loading="tableLoading"
      :data-source="data"
    >
      <a-table-column key="name" data-index="name">
        <span slot="title" style="color: #1890ff">文件名</span>
      </a-table-column>

      <a-table-column key="action" title="操作">
        <template slot-scope="text, record">
          <span>
            <a :href="local + '/pdf/' + record.name" target="_blank">原文件</a>
            <a-divider type="vertical" />
            <a
              v-show="showStamp"
              :href="local + '/pdf/stamp/' + record.name"
              target="_blank"
              >盖章文件</a
            >
          </span>
        </template>
      </a-table-column>
    </a-table>

    <a-modal
      v-model="visible"
      title="二维码"
      centered
      @ok="handleOk"
      @cancel="handleCancel"
      ok-text="获取印章"
      cancel-text="关闭"
    >
      <div style="text-align: center;">
        <img :src="qrcodeImage" width="50%" />
      </div>
    </a-modal>

    <!-- 印章展示列表   -->
    <a-modal v-model="sealsVisible" title="印章列表" width="800px" centered>
      <a-list item-layout="horizontal" :data-source="seals">
        <a-list-item slot="renderItem" slot-scope="item">
          <!-- <a slot="actions">选中</a>-->
          <a-list-item-meta :description="item.esid">
            <a
              slot="title"
              href="javascript:void(0);"
              @click="batchSignByEsId"
              style="color: #1890ff"
              >{{ item.sealName }}</a
            >
            <a-avatar
              shape="square"
              :size="100"
              slot="avatar"
              :src="'data:image/png;base64,' + item.imageData"
            />
          </a-list-item-meta>
        </a-list-item>
      </a-list>
    </a-modal>
  </div>
</template>
<script>
import { getFiles, batchSignByEsId, qrcodeGet, getUser } from "@/api/stampfile";
import { message } from "ant-design-vue";

const columns = [
  {
    title: "文件名",
    dataIndex: "name"
  }
  /* {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },*/
];

export default {
  data() {
    return {
      data: [],
      columns,
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      tableLoading: false,
      showStamp: false,
      api: process.env.VUE_APP_BASE_API,
      local: "http://" + location.host,
      qrcodeId: "", // 二维码id
      qrcodeImage: "", // 二维码图片
      visible: false, // 弹框展示
      qrcodeImageVisible: false, // 二维码展示
      sealsVisible: false, // 印章列表展示
      seals: [], // 印章列表
      esId: "", // 选中批量盖章的esId
      sealData: "" // 选中批量盖章的印章数据
    };
  },

  created() {
    // 请求后台文件数据
    this.tableLoading = true;
    getFiles()
      .then(res => {
        res.data.forEach((ele, idx) => {
          this.data.push({
            key: idx,
            name: `${ele}`
          });
        });
        this.tableLoading = false;
      })
      .catch(e => {
        this.$message.error(e);
        setTimeout(() => {
          this.loading = false;
        }, 500);
      });
  },

  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    }
  },
  methods: {
    // 获取印章
    handleOk() {
      if (!this.qrcodeId) {
        message.warn("请先扫码拉取印章");
        return;
      }
      const qrcodeId = this.qrcodeId;
      getUser({ qrcodeId: qrcodeId })
        .then(res => {
          if (res.code === 0 || res.code === "0") {
            this.seals = res.data.seals;
            if (this.seals.length < 1) {
              message.warn("请先扫码获取印章，或者您没有绑定印章！");
              return;
            }
            // 展示印章列表
            this.sealsVisible = true;
            this.handleCancel();
          } else {
            message.error("获取印章信息异常：" + res.message);
          }
        })
        .catch(e => {
          message.error("获取印章信息异常：" + e);
        });
    },
    // 关闭二维码弹窗
    handleCancel() {
      this.visible = false;
      this.qrcodeId = "";
      this.seals = [];
    },
    start() {
      this.loading = true;
      // ajax request after empty completing
      // 1. 请求后台二维码信息
      const grcodeGetParam = {
        way: "1",
        type: "1"
      };
      // 请求二维码
      qrcodeGet(grcodeGetParam)
        .then(res => {
          if (res.code === 0 || res.code === "0") {
            this.qrcodeId = res.data.qrcodeId;
            this.qrcodeImage = "data:image/png;base64," + res.data.image;
            this.loading = false;
            this.visible = true;
          } else {
            message.error("获取二维码异常：" + res.message);
          }
        })
        .catch(e => {
          this.$message.error("获取二维码异常：" + e);
        });
    },

    /**
     * 二维码点击确认
     */
    batchSignByEsId() {
      // 批量盖章
      batchSignByEsId()
        .then(res => {
          if (res.code === 0) {
            message.info(res.message + " 盖章成功！");
            // 显示盖章文件
            this.showStamp = true;
          }
          this.loading = false;
          this.selectedRowKeys = [];
        })
        .catch(e => {
          this.$message.error(e);
          setTimeout(() => {
            this.loading = false;
            this.selectedRowKeys = [];
          }, 500);
        });
      setTimeout(() => {
        this.loading = false;
        this.selectedRowKeys = [];
      }, 1000);
    },
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    }
  }
};
</script>
